<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

	<title>微信签到系统-用户管理</title>
	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css">
	<script src="./js/jquery.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/min/moment-with-locales.min.js"></script>
	<script src="./js/bootstrap-datetimepicker.min.js"></script>
	
	<style>
		.control-group{
			margin-bottom:15px;
		}
		.table tr th,.table tr td{
			text-align: center;
		}
		.title h3{
			font-size:18px;
			margin:5px 0 5px 0;
			border-left:5px solid #eee;
			padding:3px 5px;
		}
		.content-count{
			text-align: right;
		}
		.content-count span{
			color: red;
		}
		.btn-r{
			text-align: right;
		}
	</style>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
                 <button class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
                 </button>
                <a href="home" class="navbar-brand">微信签到系统</a>
          </div>
          <div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="nav navbar-nav" style="margin-top:0">
				<li><a href="home">控制台</a></li>
				<li><a href="report?method=list" >签到统计</a></li>
				<li><a href="class?method=list">学生管理</a></li>
				<li class="active"><a href="notice?method=list">公告管理</a></li>
			</ul>
			 
			<!-- <a href="#" class="navbar-text navbar-link">发布公告</a> -->
			 
			 <p class="navbar-text navbar-right">
			 	${adminInfo.roleName }：<a href="#">${adminInfo.username }</a> | 
			 	<a href="adminManager?method=logout">退出</a>
			 </p>
			 
		</div>
	</div>
</nav>

<div class="main container" style="margin-top:60px;">
<%-- 	<form action="" class="form-horizontal">
		<input type="hidden" id="currentClassId" value="${currentClassId}"/>
		<div class="form-group form-group-sm">
			<label class="col-md-2 col-xs-3 control-label" for="classId" style="text-align:left">
				按班级查看
			</label>
			<div class="col-md-4  col-xs-8">
				<div class="input-group">
					<select name="cid" id="classId" class="select form-control" onchange="chooseClass(this)">
						<c:forEach items="${classList}" var="obj">
							<option value="${obj.cid }">${obj.className }</option>
						</c:forEach>
					</select>
					<div class="input-group-btn">
						<button type="button" class="form-control"  onclick="openStudentModal()" class="btn btn-info">添加学生</button>
					</div>
					<div class="input-group-btn">
						<a class="form-control" target="_blank" href="course?method=info&cid=${currentClassId}" class="btn btn-success">查看课表</a>
					</div>
				</div>
			</div>
		</div>
	</form> --%>
	<p class="btn-r"><button class="btn btn-info" onclick="openNewNoticeModal()">发布公告</button></p>
	<div class="table-container table-responsive">
		<table class="table table-striped table-hover table-responsive">
			<thead>
			<tr>
				<th>编号</th>
				<th>公告内容</th>
				<th>发送班级</th>
				<th>创建时间</th>
				<th>发送时间</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<c:choose>
				<c:when test="${page.list!=null && page.list.size()>0}">
					<c:forEach items="${page.list }" var="obj">
						<tr>
							<td>${obj.id }</td>
							<td>${obj.content }</td>
							<td>${obj.classNames }</td>
							<td>${obj.createtime }</td>
							<td>${obj.sendTime }</td>
							<td>
							<c:choose>
								<c:when test="${obj.status==1 }">
									<span class="label label-danger">${obj.statusName }</span>
								</c:when>
								<c:otherwise>
									<span class="label label-success">${obj.statusName }</span>
								</c:otherwise>
							</c:choose>
							</td>
							<td>
								<c:if test="${obj.status==0 }">
									<a href="notice?method=close&id=${obj.id }"  onclick="return sendGET(this,'确定要终止公告么？')">终止</a> |
								</c:if>
									<a href="notice?method=delete&id=${obj.id }"  onclick="return sendGET(this,'确定要删除公告么？')">删除</a>
							 </td>
						</tr>
					</c:forEach>
				</c:when>
				<c:otherwise>
						<tr>
							<td colspan="8">暂无数据..点击 <a href="#" onclick="openNewNoticeModal()">创建公告</a>.</td>
						</tr>
				</c:otherwise>
			</c:choose>
			</tbody>
		</table>
		</div>
	
	 <ul class="pagination" id="pageul">
	 	<c:choose>
			<c:when test="${page.pageNow == 1}">
				<li class='disabled'><span>首页</span></li>
				<li class='disabled'><span>上一页</span></li>
			</c:when>
			<c:otherwise>
				<li><a href="javascript:void(0)">首页</a></li>
				<li><a href="javascript:void(0)">上一页</a></li>
			</c:otherwise>
		</c:choose>
			<c:forEach begin="${(page.navNo -1)*5 + 1}" end="${page.totalPage > 5*page.navNo?5*page.navNo:page.totalPage}" var="s">
				<li <c:if test='${page.pageNow == s}'>class='active'</c:if>><a href="javascript:void(0)">${s}</a></li>
			</c:forEach>
			<c:choose>
				<c:when test="${page.pageNow == page.totalPage}">
					<li class='disabled'><span>下一页</span></li>
					<li class='disabled'><span val="${page.totalPage}">尾页</span></li>
				</c:when>
				<c:otherwise>
					<li><a href="javascript:void(0)">下一页</a></li>
					<li><a href="javascript:void(0)" val="${page.totalPage}">尾页</a></li>
				</c:otherwise>
			</c:choose>
			<li  class="disabled"><span class="hidden-xs">总记录:${page.totalSize} | 页码:${page.pageNow}/${page.totalPage}</span></li>
	 </ul>

</div>
<script>
	$(function(){
		$("a").tooltip({
			delay:{
				show:100,
				hide:100,
			},
			container:'body'
		});
		
		var picker1 = $('#pickSendTime').datetimepicker({  
	        format: 'YYYY-MM-DD HH:mm',  
	        locale: moment.locale('zh-cn') ,
	        minDate: new Date()
	    });  
		//动态设置最小值  
	    picker1.on('dp.change', function (e) {  
	        picker2.data('DateTimePicker').minDate(e.date);  
	    });  
		pageul(${page.pageNow});
	})
	

	function openNewNoticeModal(){
		$("#NewNoticeModal").modal();
	}
	
	function chooseStatus(thisObj){
		status = $(thisObj).val();
		if(status==1){
			$(".sendTime").addClass("hide");
		}else{
			$(".sendTime").removeClass("hide");
		}
	}
	function createNoticeTask(thisObj){
		var form = $("#addNoticeForm").serialize();
		$.ajax({
			type:"post",
			url:"notice?method=save",
			data:form,
			beforeSend:function(){
				var status = $("#addNoticeForm")[0].status.value;
				var content = $("#addNoticeForm")[0].content.value;
				if(form.indexOf("cids")==-1){
					alert("请填至少选择一个班级！");
					return false;
				}
				if(content.trim()==""){
					alert("请填写公告内容！");
					return false;
				}
			},
			success:function(rsp){
				obj = $.parseJSON(rsp);
				if(obj.rspCode==0000){
					location.reload();
				}else{
					alert("创建失败："+obj.rspDesc);
				}
			},
			error:function(err,status){
				alert("创建失败："+err.status);
			}
		});
	}
	
	
	function sendGET(thisObj , msg){
		var r  = confirm(msg);
		if(r){
			url = $(thisObj).attr("href");
			$.get(url,function(rsp){
				obj = $.parseJSON(rsp);
				if(obj.rspCode==0000){
					location.reload();
				}else{
					alert("操作失败："+obj.rspDesc);
				}
			});
		}
		return false;
}

	//统计字数
	function countContent(thisObj){
		content = thisObj.value;
		$(".zi").html(240-content.length);
	}
	
		/*初始化分页*/
	function pageul(page){
		$("#pageul > li > a").each(function() {
			$(this).click(function() {
				if ($(this).text() == '上一页') {
					showPage(page - 1);
					return;
				}else if ($(this).text() == '首页') {
					showPage(1);
					return;
				} else if ($(this).text() == '下一页') {
					showPage(page + 1);
					return;
				}else if ($(this).text() == '尾页') {
					showPage($(this).attr("val"));
					return;
				} else {
					showPage($(this).text());
				}
			});
		});
	}
		
	//分页	
	function showPage(pageNo){
		cid = $("#currentClassId").val();
		if(cid!="" && cid!=null){
			location.href="class?method=list&pageNo="+pageNo+"&cid="+cid;
		}else{
			location.href="class?method=list&pageNo="+pageNo;
		}
		
	}

</script>
   
<div class="modal" id="NewNoticeModal" data-backdrop="static">
    	<div class="modal-dialog" style="max-width:600px;">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
					<span class="glyphicon glyphicon-file"> 发布公告</span>
    			</div>
    			<div class="modal-body">
    				<form method="post" action="?" class="form-horizontal" id="addNoticeForm">
					<div class="control-group">
						 <label class="control-label" for="classCids">指定推送班级</label>
						 <div class="input-group">
						 	<c:forEach items="${classList}" var="obj">
								<label class="checkbox-inline">
									<input type="checkbox" value="${obj.cid }" name="cids">${obj.className }
								</label>
							</c:forEach>
						</div>
					</div>
					<div class="control-group">
						 <label class="control-label" for="signDesc">填写公告内容</label>
						  <textarea name="content" id="" cols="30" rows="10" class="form-control" 
						  maxlength="240"
						  placeholder="请填写240字内的公告内容" onkeyup="countContent(this)"></textarea>
						  <p class="content-count">还能输入<span class="zi">240</span>字</p>
					</div> 
					<div class="control-group">
						 <label class="control-label" for="classCids">公告推送类型</label>
						 <div class="input-group">
						 		<label class="checkbox-inline" for="status1">
									<input type="radio" value="1" name="status" id="status1" checked="checked" onchange="chooseStatus(this)">立即推送
								</label>
								<label class="checkbox-inline" for="status2">
									<input type="radio" value="0" name="status" id="status2" onchange="chooseStatus(this)">定时推送
								</label>
						</div>
					</div>
					<div class="control-group sendTime hide" >
					     <label for="sendTime" class="control-label">定时推送时间</label>
			            <div class='input-group date' id='pickSendTime'>  
			                <input type='text' class="form-control" name="sendTime"  placeholder="请选择要发送的时间"/>  
			                <span class="input-group-addon">  
			                    <span class="glyphicon glyphicon-calendar"></span>  
			                </span>  
			            </div>  
				   </div>
				</form>
    			</div>
    			 <div class="modal-footer">
    			 	 <button type="submit" class="btn btn-success" onclick="createNoticeTask(this)">确认创建</button>
			        <button class="btn btn-danger" data-dismiss="modal">关闭</button>
			      </div>
    		</div>
    	</div>
    </div>
</body>
</html>